<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据库备份管理系统</title>
    <link rel="icon" th:href="@{favicon.ico}">
    <link rel="stylesheet" th:href="@{/css/base.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/base.js}"></script>
    <style>
        .layui-icon {
            margin-right: 10px;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .container-top {
            width: 100%;
            height: 40px;
            flex: none;
            background-color: #393D49;
            color: #ffffff;
            font-size: 24px;
            padding: 10px 0 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .container-bottom {
            display: flex;
            width: 100%;
            flex: auto;
        }

        .container-left {
            flex: none;
            height: 100%;
            background-color: #393D49;
        }

        .container-right {
            flex: auto;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .logout-btn i:hover {
            color: #1890ff !important;
        }

        .layui-this {
            background-color: #1890ff !important;
            color: #ffffff !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="container-top">
        <div style="margin-left: 20px; cursor: pointer; white-space: nowrap; overflow: hidden; display: flex; align-items: center">
            <img th:src="@{/favicon.ico}" style="width: 40px; margin-right: 15px">
            <span>数据库备份管理系统</span>
        </div>
        <div class="logout-btn" style="margin-right: 15px; cursor: pointer" title="注销登录">
            <i class="layui-icon" style="color: #ffffff; font-size: 24px; font-weight: bold">&#xe682;</i>
        </div>
    </div>
    <div class="container-bottom">
        <div class="container-left">
            <ul class="layui-nav layui-nav-tree" lay-filter="demo">
                <li class="layui-nav-item" lay-id="0">
                    <a href="javascript:;" lay-url="" lay-id="0" lay-text="首页">
                        <i class="layui-icon">&#xe68e;</i>
                        首页
                    </a>
                </li>
                <li class="layui-nav-item" lay-id="1">
                    <a href="javascript:;" lay-url="zone-info" lay-id="1" lay-text="分区管理">
                        <i class="layui-icon">&#xe857;</i>
                        分区管理
                    </a>
                </li>
                <li class="layui-nav-item" lay-id="2">
                    <a href="javascript:;" lay-url="node-info" lay-id="2" lay-text="实例管理">
                        <i class="layui-icon">&#xe656;</i>
                        实例管理
                    </a>
                </li>
                <li class="layui-nav-item" lay-id="3">
                    <a href="javascript:;" lay-url="backup-task" lay-id="3" lay-text="任务管理">
                        <i class="layui-icon">&#xe631;</i>
                        任务管理
                    </a>
                </li>
                <li class="layui-nav-item" lay-id="4">
                    <a href="javascript:;" lay-url="backup-log" lay-id="4" lay-text="备份记录">
                        <i class="layui-icon">&#xe655;</i>
                        备份记录
                    </a>
                </li>
            </ul>
        </div>
        <div class="container-right">
            <div class="index-iframe" style="width: 100%; height: 100%">

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'element'], function () {
        const element = layui.element;

        // 渲染首页
        $(function () {
            let url = 'welcome';
            let id = 0;
            $('.index-iframe').append('<iframe src="' + ctxPath + url + '" lay-id="' + id + '" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>');
        })

        // 左侧菜单切换
        element.on('nav(demo)', function (data) {
            let url = $(this).attr('lay-url');
            let id = $(this).attr('lay-id');
            let text = $(this).attr('lay-text');
            // 头部标签
            if (0 < id) {
                let tabChild = $('.layui-tab-title').find('li[lay-id=' + id + ']');
                if (0 === tabChild.length) {
                    $('.layui-tab-title').append('<li lay-id="' + id + '">' + text + '</li>');
                }
                $('.layui-tab-title li').removeClass('layui-this');
                $('.layui-tab-title').find('li[lay-id=' + id + ']').addClass('layui-this');
            }
            // iframe页面
            let child = $('.index-iframe').find('iframe[lay-id=' + id + ']');
            if (0 === child.length) {
                $('.index-iframe').append('<iframe src="' + ctxPath + url + '" lay-id="' + id + '" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>');
            }
            $('.index-iframe iframe').addClass('hidden');
            $('.index-iframe').find('iframe[lay-id=' + id + ']').removeClass('hidden');
        })

        // 登出
        $('.logout-btn').click(function () {
            setCookie('satoken', '', -1);
            window.location.href = ctxPath + 'doLogout';
        })
    })

    //设置cookie
    function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        const expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
</script>
</body>
</html>